<!DOCTYPE html>
<html>
  <head>
    <!-- 测试如何移动好看的线 -->
    <meta charset="utf-8" />
    <title>canvas测试</title>

    <style>
      #myCanvas {
        background-color: black;

        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>

  <body>
    <canvas id="myCanvas"> </canvas>
  </body>
</html>

<script type="text/javascript">
  var c = document.getElementById("myCanvas");

  c.width = window.innerWidth;
  c.height = window.innerHeight;

  var ctx = c.getContext("2d");

  ctx.strokeStyle = "hsla(200, 80%, 50%, .05)";

  const p1 = {
    x: 50,
    y: 50,
    vx: 5,
    vy: 1,
  }

  const p2 = {
    x: 200,
    y: 100,
    vx: -5,
    vy: 5,
  }

  function drawLine(p1, p2){

    // 画线
    ctx.beginPath();
    ctx.moveTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
    ctx.stroke();
  }

  function move(){
    p1.x = p1.x + p1.vx;
    p1.y = p1.y + p1.vy;
    p2.x = p2.x + p2.vx;
    p2.y = p2.y + p2.vy;
  }


  function anim(){
    move()
    drawLine(p1, p2)
  }


  function startAnimation(fn){

    function loop(){
      fn();
      window.requestAnimationFrame(loop)
    }

    loop();
  }


  startAnimation(anim);

</script>
